<template>
  <div class="song-list">
      <ul>
          <li class="item" v-for="(itme,index,key) in songs" :key="key"> 
              <div class="content">
                <h2 class="name">{{itme.name}}</h2>
                <p class="desc">{{getDesc(itme)}}</p>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  props: {
    songs: {
      type: Array,
      default: []
    }
  },
  methods:{
      getDesc(song){
        // console.log(songs)
          return `${song.singer}.${song.album}`
      }
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.song-list{
.item{
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: 64px;
      font-size:12px;
      .content{
        flex: 1;
        line-height: 20px;
        overflow: hidden;
        
        
        
        }
      }
}
</style>
